<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh;
      background-color: rgb(35, 152, 154);
    }

    .text {
      font-size: 80px;
      font-weight: bold;
      color: white;
      letter-spacing: 7px;
      position: relative;
      z-index: 1;
    }

    .text::before {
      content: "ICODING";
      position: absolute;
      top: 0;
      left: -30px;
      color: black;
      transform: translate(-10px, 10px) scaleY(0.8) skewX(50deg);
      /* 控制文字阴影在文字下面显示 */
      z-index: -1;
      /* 添加滤镜 */
      filter: blur(1px);
      /* 添加遮罩层 */
      mask: linear-gradient(transparent, #000);
    }
  </style>
  <body>
    <div class="container">
      <div class="text">ICODING</div>
    </div>
  </body>
</html>
